<template>
  <view class="home">
    <!-- 表头 -->
    <view class="header">todos</view>
    <!-- 输让框 -->
    <view class="search">
      <u-input
        v-model="value"
        confirm
        type="text"
        border
        clearable="false"
        height="80"
        placeholder-style="font-size:40rpx"
        placeholder="请输入todos..."
        border-color="#3793df"
        :custom-style="fontStyle"
        @confirm="handleOK"
      />
      <u-icon
        size="70"
        color="#3793df"
        name="checkbox-mark"
        class="icoInp"
        @click="handleOK"
      ></u-icon>
    </view>
    <!-- 内容渲染 -->
    <view class="content">
      <u-swipe-action
        v-for="(item, index) in list"
        :show="item.show"
        :index="item.id"
        :key="item.id"
        @click="click"
        @open="open"
        :options="options"
        btnWidth="100"
        bg-color="#f5f6f7"
      >
        <view :class="item.isDone ? 'finish item' : 'item'">
          <!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
          <view class="title-wrap">
            <text class="title u-line-2">{{ index + 1 }}. {{ item.task }}</text>
          </view>
        </view>
      </u-swipe-action>
    </view>

    <view class="footer">
      <u-row>
        <u-col span="4" text-align="center">
          <view class="demo-layout bg-purple">未完成 : {{ unfinish }}</view>
        </u-col>
        <u-col span="4" text-align="center">
          <view class="demo-layout bg-purple-light">已完成 : {{ finish }}</view>
        </u-col>
        <u-col span="4" text-align="center">
          <view class="demo-layout bg-purple-dark"
            >总数 : {{ list.length }}</view
          >
        </u-col>
      </u-row>
    </view>
    <!-- 弹窗显示 -->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      fontStyle: { fontSize: '40rpx' },
      list: uni.getStorageSync('todos_list') || [
        {
          id: 1,
          task: '学习',
          isDone: false,
          show: false,
        },
        {
          id: 2,
          task: '睡觉',
          isDone: true,
          show: false,
        },
        {
          id: 3,
          task: '打豆豆',
          isDone: false,
          show: false,
        },
      ],
      options: [
        {
          text: 'yes',
          style: {
            backgroundColor: '#0dbc79',
          },
        },
        {
          text: 'no',
          style: {
            backgroundColor: '#3793df',
          },
        },
        {
          text: 'del',
          style: {
            backgroundColor: '#dd524d',
          },
        },
      ],
    };
  },
  methods: {
    click(id, btnIndex) {
      // console.log(88, index, btnIndex);
      if (btnIndex == 2) {
        const list = this.list.filter((item) => item.id !== id);
        this.list = list;
        // this.list.splice(index, 1);
        // this.$u.toast(`删除成功`);
        this.$refs.uToast.show({
          title: '删除成功喔',
          type: 'error',
        });
      } else if (btnIndex == 1) {
        //不要更改 原来的数组
        const list = this.list.map((item) => ({
          ...item,
          show: item.id === id ? false : item.show,
          isDone: item.id === id ? false : item.isDone,
        }));
        this.list = list;

        // this.list[index].show = false;
        // this.list[index].isDone = false;
        // this.$u.toast(`不开心,未完成`);
        this.$refs.uToast.show({
          title: '不开心,未完成',
          type: 'primary',
        });
      } else {
        const list = this.list.map((item) => ({
          ...item,
          show: item.id === id ? false : item.show,
          isDone: item.id === id ? true : item.isDone,
        }));
        this.list = list;

        // this.list[index].show = false;
        // this.list[index].isDone = true;
        // this.$u.toast(`好开心,完成啦`);
        this.$refs.uToast.show({
          title: '好开心,完成啦',
          type: 'success',
        });
      }
    },

    // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
    open(id) {
      console.log(130, id);
      // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
      // 原本为'false'，再次设置为'false'会无效

      const list = this.list.map((item) => ({
        ...item,
        show: item.id === id ? true : false,
      }));
      this.list = list;

      // this.list[index].show = true;

      // this.list = list;
      // this.list.map((val, idx) => {
      //   if (index != idx) this.list[idx].show = false;
      // });
    },

    //点击确认 新增条数
    handleOK() {
      //判断是否为空
      if (!this.value.trim()) {
        this.$refs.uToast.show({
          title: '不能为空哈哈',
          type: 'error',
        });

        return;
      }

      //新增数据
      this.list.push({
        id: Date.now(),
        task: this.value,
        isDone: false,
        show: false,
      });

      this.value = '';
    },
  },

  watch: {
    list: function (val, oldVal) {
      console.log('list发生变化了');
      uni.setStorageSync('todos_list', val);
    },
  },

  computed: {
    // 未完成计算
    unfinish() {
      const newList = this.list.filter((item) => !item.isDone);
      return newList.length;
    },
    // 完成计算
    finish() {
      const newList = this.list.filter((item) => item.isDone);
      return newList.length;
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  position: relative;
  padding: 30rpx;
  padding-bottom: 0;
  // background-color: red;
}
.header {
  width: 100%;
  font-size: 120rpx;
  color: #3793df;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  text-align: center;
  font-weight: 700;
}
.search {
  position: relative;
  margin-bottom: 20rpx;
}
.content {
  height: 1020rpx;
  overflow: auto;
}
</style>

<style lang="scss" scoped>
.item {
  display: flex;
  padding: 20rpx;
  border-bottom: 1px solid #3793df;
}

.title {
  text-align: left;
  font-size: 35rpx;
  color: #333;
}

.title-wrap {
  width: 100%;
}
.finish {
  background-color: rgba(118, 238, 198, 0.35);
}
.icoInp {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  background-color: #fff;
  padding-left: 20rpx;
  z-index: 999;
}
.footer {
  // height: ;
  // position: absolute;
  // left: 0;
  // bottom: 0;
  font-size: 30rpx;
  padding-top: 20rpx;
  color: #3793df;
  // background-color: yellow;
}
</style>
